<template>
    <div>
      <el-card shadow="always" :body-style="{ padding: '20px' }" v-show="scene===1">
        <el-row :gutter="20">
            <el-col :span="1" :offset="0">
            <el-button type="primary" size="default" @click="addteacherlist">添加</el-button>
          </el-col>
          <el-col :span="1" :offset="0">
            <el-button type="primary" size="default" @click="byidgetlistdata(teacherid)">查询</el-button>
          </el-col>
          <el-col :span="8" :offset="0">
            <el-input v-model="teacherid" placeholder="查询教师.." size="normal" clearable @change="changeinput"></el-input>
          </el-col>
        </el-row>
      </el-card>
      <el-table :data="listdata" border stripe  v-show="scene===1">
        <el-table-column type="index" prop="col.id" label="序号" :width="80">
        </el-table-column>
        <el-table-column prop="col.id" label="教师编号" width="80">
          <template slot-scope="{ row, $index }">
            <div>
              JTJYZDS-{{ row.id }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="col.id" label="名字" width="80">
          <template slot-scope="{ row, $index }">
            <div>
              {{ row.name }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="col.id" label="性别" width="80">
          <template slot-scope="{ row, $index }">
            <div>
              {{ row.sex }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="col.id" label="电话号码" width="width">
          <template slot-scope="{ row, $index }">
            <div class="truncate">
              {{ row.tel }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="col.id" label="工作状态" width="120">
          <template slot-scope="{ row, $index }">
            <div>
              {{ row.nowmy }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="col.id" label="照片" width="width">
          <template slot-scope="{ row, $index }">
            <div>
              <img :src="row.URLIMG" style="width: 120px;height: 120px;">
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="prop" label="操作" width="width">
          <template slot-scope="{ row, $index }">
            <div>
              <el-button
                v-show="row.isSale"
                type="success"
                size="mini"
                icon="el-icon-sort-up"
                circle
                @click="downdatashop(row)"
              ></el-button>
              <el-button
                v-show="!row.isSale"
                type="primary"
                size="mini"
                icon="el-icon-sort-down"
                circle
                @click="updatashop(row)"
              ></el-button>
  
              <el-button
                type="warning"
                size="mini"
                circle
                icon="el-icon-edit"
                @click="showshopdetail(row)"
              ></el-button>
              <el-button
                type="info"
                size="mini"
                circle
                icon="el-icon-info"
                @click="maintenance(row)"
              ></el-button>
              <el-button
                type="danger"
                size="mini"
                circle
                icon="el-icon-delete"
                @click="deletebut(row)"
              >
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-drawer
        style="font-size: 30px; color: #000"
        title="教师详情:"
        :visible.sync="drawer"
        :direction="direction"
        size="50%"
        :before-close="handleClose"
      >
        <el-row>
          <el-col :span="5">姓名</el-col>
          <el-col :span="16" style="color:#0a84ff ;"> {{  showteacherdata.name }}</el-col>
        </el-row>
       
        <el-row>
          <el-col :span="5">性别</el-col>
          <el-col :span="16" style="color:#0a84ff ;"> {{  showteacherdata.sex }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="5">评分</el-col>
          <el-col :span="16" style="color:#0a84ff ;">{{  showteacherdata.mark }} </el-col>
        </el-row>
        <el-row>
          <el-col :span="5">联系方式</el-col>
          <el-col :span="16" style="color:#0a84ff ;"> {{  showteacherdata.tel }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="5">工作状态</el-col>
          <el-col :span="16" style="color:#0a84ff ;">{{  showteacherdata.nowmy }} </el-col>
        </el-row>
        
        <!-- 价格 -->
        <el-row>
          <el-col :span="5">教育经验</el-col>
          <el-col :span="16" > {{  showteacherdata.content }}</el-col>
        </el-row>
       
        <el-row>
          <el-col :span="5">专业领域</el-col>
          <el-col :span="16"> {{  showteacherdata.profile }}</el-col>
        </el-row>
        <el-row>
          <el-row>
          <el-col :span="5">工作经验</el-col>
          <el-col :span="16" > {{  showteacherdata.profession }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="5">教育理念</el-col>
          <el-col :span="16" > {{  showteacherdata.educationalidea }}</el-col>
        </el-row>
          <el-col :span="5">图片</el-col>
          <el-col :span="16">
            <img :src=" showteacherdata.IMGURL" style="width: 120px;">
        </el-col>
        </el-row>
        
      </el-drawer>
      <div v-show="scene===2">
        <!--  -->
        <spuindex  ref="spu" @spusendscene="spusendscene" > </spuindex>
      </div>
    </div>
  </template>
  
  <script>
  import spuindex from './spuform/index.vue'
  export default {
    name: "",
    data() {
      return {
        listdata_r: [],
        listdata: [],
        listselect: "",
        isSale: true,
        drawer: false, //抽屉展示与隐藏
        direction: "rtl",
        teacherid: "",
        showcontent: "",
         showteacherdata:{},
         scene:1,
        rules: {
            teacherid: {
                          rule: /^[0-9]+$/,
                          msg: "输入异常.."
                      },
          }
      }
      
    },
    components:{
        spuindex
    },
    methods: {
            //正则校验
              validate(key) {
                  let bool = true;
                  if (!this.rules[key].rule.test(this[key])) {
                      this.$message({
                          message: this.rules[key].msg,
              type:"warning"
                      })
                      bool = false;
                      return bool;
                  }
                  return bool;
              },
      async updatashop(row) {
        row.isSale = 1;
       
      },
      //下架数据的回调
      async downdatashop(row) {
        row.isSale = 0;
      
      },
      //展开详细详情:
      async showshopdetail(row) {
        this.drawer = true;

        let result = await this.$API.teacherManagement.teacherManagement(row.id || row);
        if(result.code === 200){
                const IMGURL = `https://zyc618.mynatapp.cc/${result.data.img}`;
                this. showteacherdata= {...result.data,IMGURL}
        }
      },
      //开发维护
      maintenance(row) {
        this.$message("开发维护中...");
      },
      //删除按钮的回调
      deletebut(row) {
        this.$message("暂时不支持删除...");
      },
      //获取教师所有数据
      async getlistdata() {
        let result = await this.$API.teacherManagement.getteacherslist();
        if (result.code === 200) {
          this.listdata = result.data.map((obj, index) => {
            // 构建URLIMG属性，例如基于id生成一个URL
          const URLIMG = `http://zyc618.mynatapp.cc/${obj.img}`;
            // 使用扩展运算符（...）将现有对象的属性复制到新对象中
         return { ...obj, URLIMG };
        });
        }
      },
      //根据id号查询教师数据:
      async byidgetlistdata(teacherid){
        if(! this.validate('teacherid')){
           this.getlistdata()
          return
        }else{
            this.showshopdetail(teacherid)
        }
       
      },
      //发起修改保存回调
      savecontent() {
        this.$message("开发维护中...");
      },
      //确认关闭？
      handleClose(done) {
        this.$confirm("确认关闭？")
          .then((_) => {
            done();
          })
          .catch((_) => {});
      },
      changeinput(value){
      },
      addteacherlist(){
        this.scene = 2;
      // this.$refs.spu.initSpuData(row);
      },
      spusendscene(){
        this.scene = 1;
      }
    },
    mounted() {
      this.getlistdata();
    },
    computed:{
       
      }
  };
  </script>
  
  <style scoped>
  .truncate {
    overflow: hidden;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    width: 200px; /* 设置宽度 */
  }
  .el-row .el-col-5{
    font-size: 18px;
    text-align: right;
  }
  .el-col{
    margin: 10px 10px;
    font-size: 14px;
    align-content: center;
  }
  .el-carousel__item h3 {
      color: #475669;
      font-size: 14px;
      opacity: 0.75;
      line-height: 200px;
      margin: 0;
    }
    
    .el-carousel__item:nth-child(2n) {
      background-color: #99a9bf;
    }
    
    .el-carousel__item:nth-child(2n+1) {
      background-color: #d3dce6;
    }
  </style>
  